<style>
	.screen{margin-top: 15px;}
	.goods-info{justify-content: left !important;float: unset !important;}
	.goods-info-name{max-width: 80px;overflow: hidden;cursor: pointer;}
	.change-name{cursor: pointer;}
	.layui-layout-admin .layui-form-item .layui-input-inline{background-color: #fff;}
	.layui-layout-admin .screen{margin-bottom: 15px;}
	.layui-layout-admin .single-filter-box{padding-bottom: 0;}
	.time-lineheight {line-height: 1.3}
</style>

<div class="single-filter-box">
	<button class="layui-btn" onclick="clickAdd()">添加会员</button>
</div>
<div class="screen layui-collapse" lay-filter="selection_panel">
	<div class="layui-colla-item">
		<form class="layui-colla-content layui-form layui-show">
			<div class="layui-form-item">

				<div class="layui-inline">
					<label class="layui-form-label">会员昵称：</label>
					<div class="layui-input-inline">
						<input type="text" name="nickname" placeholder="请输入会员昵称" class="layui-input">
					</div>
				</div>

				<div class="layui-inline">
					<label class="layui-form-label">会员手机号：</label>
					<div class="layui-input-inline">
						<input type="text" name="mobile" placeholder="请输入会员手机号" class="layui-input">
					</div>
				</div>

				<!-- <div class="layui-inline">
					<label class="layui-form-label">上级分销商：</label>
					<div class="layui-input-inline">
						<input type="text" name="parent_name" placeholder="请输入上级分销商" class="layui-input">
					</div>
				</div> -->
			</div>

			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">添加时间：</label>
					<div class="layui-input-inline">
						<input type="text" class="layui-input" name="start_time"  id="start_time" autocomplete="off" placeholder="开始时间" readonly>
						<i class="iconrili iconfont calendar"></i>
					</div>
					<div class="layui-form-mid">-</div>
					<div class="layui-input-inline">
						<input type="text" class="layui-input" name="end_time" id="end_time" autocomplete="off" placeholder="结束时间" readonly>
						<i class="iconrili iconfont calendar"></i>
					</div>
				</div>

				<div class="layui-inline">
					<label class="layui-form-label">链动等级：</label>
					<div class="layui-input-inline">
						<select name="level_id" lay-filter="level_id">
							<option value="">全部</option>
							{volist name="$level_list" id="level"}
							<option value="{$level.level_id}">{$level.level_name}</option>
							{/volist}
						</select>
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">链动状态：</label>
					<div class="layui-input-inline">
						<select name="status" lay-filter="status">
							<option value="">全部</option>
							<option value="1">正常</option>
							<option value="-1">已冻结</option>
						</select>
					</div>
				</div>
			</div>

			<div class="form-row">
				<button class="layui-btn" lay-submit lay-filter="search">筛选</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</form>
	</div>
</div>

<!-- 列表 -->
<table id="fenxiao_list" lay-filter="fenxiao_list"></table>

<!-- 用户信息 -->
<script type="text/html" id="account">
	<div class="layui-elip">当前佣金：{{d.account}}</div>
	<div class="layui-elip">已提现佣金：{{d.account_withdraw}}</div>
</script>

<!-- 会员信息 -->
<script type="text/html" id="username">
	<a href="javascript:memberDetail({{ d.member_id }});">{{ d.username }}</a>
</script>

<!-- 状态 -->
<script type="text/html" id="status">
	{{# if(d.status == 1){ }}
	<span style="color: green;">正常</span>
	{{# }else if(d.status == -1){ }}
	<span style="color: gray;">冻结</span>
	{{# } }}
</script>

<script type="text/html" id="memberInfo">
	<div class='table-title'>
		<div class='title-pic'>
			<img layer-src src="{{ns.img(d.headimg)}}" onerror="this.src = '{:img('public/static/img/default_img/head.png')}' ">
		</div>
		<div class='title-content'>
			<p class="layui-elip">{{d.nickname || '-'}}</p>
			<p class="layui-elip">{{d.member_mobile || '-'}}</p>
		</div>
	</div>
</script>

<!-- 工具栏操作 -->
<script type="text/html" id="operation">
	<div class="table-btn">
		<a class="layui-btn" lay-event="delete">删除</a>
		<!-- <a class="layui-btn" lay-event="detail">查看</a> -->
		<!-- {{# if(d.status == 1){ }}
		<a class="layui-btn" lay-event="frozen">冻结</a>
		<!-- <a class="layui-btn" lay-event="change">上级分销商变更</a> -->
		{{# } }}
		{{# if(d.status == -1){ }}
		<a class="layui-btn" lay-event="unfrozen">恢复正常</a>
		{{# } }} -->
	</div>
</script>

	<!-- 直推上级信息 -->
	<script type="text/html" id="pidInfo">
		{{# if(d.pid_info){ }}
		<div class='table-title'>
			<div class='title-pic'>
				<img layer-src src="{{ns.img(d.pid_info.headimg)}}" onerror="this.src = '{:img('public/static/img/default_img/head.png')}' ">
			</div>
			<div class='title-content'>
				<p class="layui-elip"><span class="layui-badge layui-bg-green">{{d.pid}}</span></p>
				<p class="layui-elip">{{d.pid_info.nickname}}</p>
			</div>
		</div>
		{{# } else { }}
		<span class="layui-badge layui-bg-gray">平台</span>
		{{# } }}
	</script>

	<!-- 链动上级信息 -->
	<script type="text/html" id="lianPidInfo">
		{{# if(d.lian_pid_info){ }}
		<div class='table-title'>
			<div class='title-pic'>
				<img layer-src src="{{ns.img(d.lian_pid_info.headimg)}}" onerror="this.src = '{:img('public/static/img/default_img/head.png')}' ">
			</div>
			<div class='title-content'>
				<p class="layui-elip"><span class="layui-badge layui-bg-orange">{{d.lian_pid}}</span></p>
				<p class="layui-elip">{{d.lian_pid_info.nickname}}</p>
			</div>
		</div>
		{{# } else { }}
		<span class="layui-badge layui-bg-gray">平台</span>
		{{# } }}
	</script>

	<!-- 链动等级 -->
	<script type="text/html" id="levelInfo">
		<span class="layui-badge layui-bg-cyan">{{d.level_name || '未设置'}}</span>
	</script>

	<!-- 前2直推下级 -->
	<script type="text/html" id="childInfo">
		<div>
			<div>直推1:
				{{# if(d.child_mid1_exists > 0){ }}
				<span class="layui-badge layui-bg-blue">{{d.child_mid1_exists}}</span>
				{{# } else { }}
				<span class="layui-badge layui-bg-gray">无</span>
				{{# } }}
			</div>
			<div>直推2:
				{{# if(d.child_mid2_exists > 0){ }}
				<span class="layui-badge layui-bg-blue">{{d.child_mid2_exists}}</span>
				{{# } else { }}
				<span class="layui-badge layui-bg-gray">无</span>
				{{# } }}
			</div>
		</div>
	</script>

	<!-- 收益信息 -->
	<script type="text/html" id="commissionInfo">
		<div>
			<div>总收益: <span class="layui-badge layui-bg-green">{{d.commission || '0.00'}}</span></div>
			<div>已发放: <span class="layui-badge layui-bg-blue">{{d.give_commission || '0.00'}}</span></div>
			<div>冻结: <span class="layui-badge layui-bg-orange">{{d.frozen_commission || '0.00'}}</span></div>
		</div>
	</script>

	<!-- 解冻任务状态 -->
	<script type="text/html" id="thawStatus">
		{{# if(d.thaw_status == 1){ }}
		<span class="layui-badge layui-bg-green">已完成</span>
		{{# } else { }}
		<span class="layui-badge layui-bg-orange">未完成</span>
		{{# } }}
	</script>
<script>
	var table,form,laydate, repeat_flag = false; //防重复标识;
	layui.use(['form', 'laydate'], function() {
		form = layui.form;
		laydate = layui.laydate;
		form.render();

		//渲染时间
		laydate.render({
			elem: '#start_time',
			type: 'datetime'
		});

		laydate.render({
			elem: '#end_time',
			type: 'datetime'
		});

		table = new Table({
			elem: '#fenxiao_list',
			url: ns.url("lian://shop/member/lists"),
			cols: [
				[{
					field: 'id',
					title: 'ID',
					unresize: 'false',
					width: '5%'
				}, {
					title: '会员信息',
					unresize: 'false',
					width: '12%',
					templet:'#memberInfo'
				}, {
					title: '直推上级信息',
					unresize: 'false',
					width: '12%',
					templet: '#pidInfo'
				}, {
					title: '链动上级信息',
					unresize: 'false',
					width: '12%',
					templet: '#lianPidInfo'
				}, {
					title: '链动等级',
					unresize: 'false',
					width: '6%',
					templet: '#levelInfo'
				}, {
					title: '前2直推下级',
					unresize: 'false',
					width: '8%',
					templet: '#childInfo'
				}, {
					title: '收益信息',
					width:'10%',
					unresize: 'false',
					templet: '#commissionInfo'
				}, {
					title: '解冻任务状态',
					unresize: 'false',
					width: '8%',
					templet: '#thawStatus'
				}, 
				
				{
					field: 'create_time',
					title: '添加时间',
					unresize: 'false',
					width: '8%',

				}, 
				{
					field: 'up_time',
					title: '成为老板时间',
					unresize: 'false',
					width: '8%',

				}, 
				{
					title: '操作',
					toolbar: '#operation',
					unresize: 'false',
					width: '4%',
					align:'right'
				}]
			]
		});

		/**
		 * 搜索功能
		 */
		form.on('submit(search)', function(data) {
			table.reload({
				page: {
					curr: 1
				},
				where: data.field
			});
			return false;
		});

		/**
		 * 监听工具栏操作
		 */
		table.tool(function(obj) {
			var data = obj.data,
				event = obj.event;
			switch (event) {
				case 'delete': //删除
					layer.confirm('确定要删除该账户吗?', function (index) {
						if (repeat_flag) return;
						repeat_flag = true;
						layer.close(index);
						$.ajax({
							url: ns.url("lian://shop/member/delete"),
							data: {id: data.id},
							dataType: 'JSON',
							type: 'POST',
							success: function (res) {
								layer.msg(res.message);
								repeat_flag = false;
								if (res.code == 0) {
									table.reload();
								}
							}
						});
					});
					break;
				case 'detail': //查看
					location.hash = ns.hash('lian://shop/member/detail', {'member_id': data.member_id});
					break;
				case 'frozen': //冻结
					layer.confirm('确定要冻结该账户吗?', function (index) {
						if (repeat_flag) return;
						repeat_flag = true;
						layer.close(index);

						$.ajax({
							url: ns.url("lian://shop/member/frozen"),
							data: {member_id: data.member_id},
							dataType: 'JSON',
							type: 'POST',
							success: function (res) {
								layer.msg(res.message);
								repeat_flag = false;
								if (res.code == 0) {
									table.reload();
								}
							}
						});
					});
					break;
				case 'unfrozen': //解冻
					layer.confirm('该账户确定要恢复正常吗?', function (index) {
						if (repeat_flag) return;
						repeat_flag = true;
						layer.close(index);

						$.ajax({
							url: ns.url("lian://shop/member/unfrozen"),
							data: {member_id: data.member_id},
							dataType: 'JSON',
							type: 'POST',
							success: function (res) {
								layer.msg(res.message);
								repeat_flag = false;
								if (res.code == 0) {
									table.reload();
								}
							}
						});
					});
					break;
				case 'change':
					change(data.member_id);
					break;
			}
		});
	});

	//改变上级分销商
	function change(member_id){
		var url = ns.url("lian://shop/member/change", {request_mode: 'iframe',member_id:member_id,change_end_func:'changeEnd'});
		layer.open({
			title: "变更上级链动会员",
			type: 2,
			area: ['1200px', '800px'],
			content: url,
		});
	}
	//改变上级分销商结束
	function changeEnd() {
		listenerHash(); // 刷新页面
		layer.closeAll();
	}

	//改变等级
	function changeLevel(member_id,lian_id){
		var url = ns.url("lian://shop/member/changeLevel", {request_mode: 'iframe',member_id:member_id,lian_id:lian_id,change_end_func:'changeLevelEnd'});
		layer.open({
			title: "变更链动会员等级",
			type: 2,
			area: ['800px', '650px'],
			content: url,
		});
	}
	//改变等级结束
	function changeLevelEnd() {
		listenerHash(); // 刷新页面
		layer.closeAll();
	}

    function memberDetail(member_id){
        window.open(ns.href("shop/member/editMember?member_id=" + member_id));
    }

	function clickAdd() {
	    location.hash = ns.hash('lian://shop/member/add');
	}
</script>
